import ProForm, {ModalForm,ProFormText,ProFormRadio} from '@ant-design/pro-form';
import React, { useState } from 'react';
import {message,Form ,Cascader} from 'antd';
import request from '@/utils/request';

export type ChooseProps = {
    modalVisible: boolean;
    data?:any;
    id:string;
    areaThree:any;
    onCancel: (flag?: boolean) => void;
    onFinish:(data:any)=>void;
};

const AddressDialog: React.FC<ChooseProps> = (props)=>{
  const [addressInfo, setAddressInfo] = useState<any[]>([]);


  async function  saveDealerRecv(params:any){
    return request('/xwyl/dealer/saveDealerRecv', {
      method: 'POST',
      requestType:'form',
      data: {
        ...params,
        method: 'post',
      },
    });
  }

  function onChange(info:any,data:any){
    setAddressInfo(data);
  }

    return (
      <ModalForm
        title="地址编辑"
        width={1000}
        modalProps={{
          forceRender: true,
            destroyOnClose: true,
        }}
        visible={props.modalVisible}
        onVisibleChange={(val)=>{
          props.onCancel(val);
        }}
        onFinish={async(value)=>{
          value.provinces = value.areas[0];
          value.city = value.areas[1];
          value.area = value.areas[2];
          value.dealerId = props.id;
          if(props.data?.recv_id){
            value.recv_id=props.data?.recv_id;
          }
          var val = await saveDealerRecv(value);
          console.log(val,value);
          if(val.errorCode==='200'){
            message.success('提交成功');
            if(addressInfo.length==0){
              value.provinces_label = props.data?.provinces_label;
              value.city_label = props.data?.city_label;
              value.area_label = props.data?.area_label;
            }else{
              value.provinces_label=addressInfo[0].label;
              value.city_label=addressInfo[1].label;
              value.area_label=addressInfo[2].label;
            }
            if(!value.recv_id){
              value.recv_id=val.data
            }
            props.onFinish(value);
          }else{
            message.error(val.errorMessage);
          }
          return true;
        }}
      >
        <ProForm.Group >
          <ProFormText  name="recv_consignee" label="收货人" rules={[{ required: true}]}   initialValue={props.data?.recv_consignee} width="sm"/>
          <ProFormText  name="recv_phone" label="收货电话" rules={[{ required: true}]}  initialValue={props.data?.recv_phone}   width="sm"/>
          <ProFormText  name="recv_postcode" label="邮编" initialValue={props.data?.recv_postcode}  width="sm"/>
        </ProForm.Group>
        <ProFormRadio.Group width="md"  rules={[{ required: true}]}   label="默认收货地址" name="recv_default" initialValue={props.data?.recv_default}  options={[{label:'是',value:'1'}, {label:'否',value:'0'}]}  />
        <ProForm.Group >
              <Form.Item
                  name="areas"
                  initialValue={props.data?.areas}
                  label="收件地区"
                  rules={[
                    {
                      required: true,
                    },
                  ]} 
                  style={{width:'440px'}}
                >
                  <Cascader
                    options={props.areaThree}
                    onChange={onChange}
                    placeholder="请选择"
                />
              </Form.Item>
            </ProForm.Group>
            <ProFormText  name="recv_address" label="收货详细地址" rules={[{ required: true}]}  initialValue={props.data?.recv_address}   width="lg"/>

      </ModalForm>
    );
}
export default AddressDialog;